<template>
    <div class="role">
        <Row>
            <Col>
                <Card class="clearfix" style="padding-bottom: 16px">
                    <p slot="title">
				        角色功能设置
			        </p>
                    <Row>
                        <Col span="12">
                            <Card dis-hover>
                                <p slot="title">
                                    <Icon type="ios-list-box-outline" :size="20"/>  
                                    已有功能(拖拽到右侧删除)
                                </p>
                                <div style="height: 360px;">
                                    <ul id="doList" class="iview-admin-draggable-list">
                                        <li v-for="(item, index) in doArray" :key="index" class="notwrap todolist-item" :data-index="index" :value="item.id">
                                            {{ item.functiontitle }}
                                        </li>
                                    </ul>
                                </div>
                            </Card>
                        </Col>
                        <Col span="12" class="padding-left-10">
                            <Card dis-hover>
                                <p slot="title">
                                    <Icon type="ios-list-box" :size="20"/>
                                    功能清单(拖拽到左侧添加)
                                </p>
                                <div style="height: 360px;">
                                    <ul id="todoList" class="iview-admin-draggable-list">
                                        <li v-for="(item, index) in todoArray" :key="index" class="notwrap todolist-item" :data-index="index" :value="item.id">
                                            {{ item.functiontitle }}
                                        </li>
                                    </ul>
                                </div>
                            </Card>
                        </Col>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import Sortable from 'sortablejs'
import ajax from '../../../../libs/axios.js'
export default {
    name: 'draggable-list',
    data () {
        return {
            todoArray: [],
            doArray: [],
            roleFunction: {
                functionId: '',
                roleId: ''
            }
        }
    },
    mounted () {
        let roleid = this.$route.params.id;
        document.body.ondrop = function (event) {
            event.preventDefault()
            event.stopPropagation()
        }
        let vm = this
        let todoList = document.getElementById('todoList')
        Sortable.create(todoList, {
            group: {
                name: 'list',
                pull: true
            },
            animation: 120,
            ghostClass: 'placeholder-style',
            fallbackClass: 'iview-admin-cloned-item',
            onRemove (event) {
                let functionId = event.item.value
                let roleId = vm.$route.params.id
                let url = 'adminlogin/role/addRoleFunction'
                let data = {
                    functionid: functionId,
                    roleid: roleId
                }
                ajax
                    .formRes(url, data)
                    .then(res => {
                        console.log('操作成功')
                        // success
                    })
                    .catch(res => {
                        console.log('有错误信息')
                        // fail
                    })
                // vm.doArray.splice(event.newIndex, 0, vm.todoArray[event.item.getAttribute('data-index')]);
            }
        })
        let doList = document.getElementById('doList')
        Sortable.create(doList, {
            group: {
                name: 'list',
                pull: true
            },
            sort: true,
            filter: '.iview-admin-draggable-delete',
            animation: 120,
            fallbackClass: 'iview-admin-cloned-item',
            onRemove (event) {
                let id = event.item.value
                let url = 'adminlogin/role/deleteByRoleidAndFunctionid'
                let data = {
                    functionid: id,
                    roleid:roleid
                }
                ajax
                    .formRes(url, data)
                    .then(res => {
                        console.log('操作成功')
                        // success
                    })
                    .catch(res => {
                        console.log('有错误信息')
                        // fail
                    })
            }
        })
        // 获取数据源
        this.init()
    },
    created() {
        this.$store.commit('setActiveName', 'setroleindex');
    },
    methods: {
        // 初始化数据
        init () {
            // 获取传递测参数
            let id = this.$route.params.id
            let url = 'adminlogin/function/selectDoListByRoleId'
            let url2 = 'adminlogin/function/selectNotDoListByRoleId'
            let data = {
                roleId: id
            }
            // 获取选中的内容
            ajax
                .formRes(url, data)
                .then(res => {
                    // success
                    if(res.code == 200){
                        this.doArray = res.data
                    }

                })
                .catch(res => {
                    console.log('有错误信息')
                    // fail
                })
            // 获取未选中的内容
            ajax
                .formRes(url2, data)
                .then(res => {
                    // success
                    if(res.code == 200){
                        this.todoArray = res.data
                    }
                })
                .catch(res => {
                    console.log('有错误信息')
                    // fail
                })
        }
    },
}
</script>
<style lang="less">
    @import "../../../../styles/common.less";
    @import "../less/user-role.less";
</style>
<style>
    .role .iview-admin-draggable-list{
        height: 350px;
        overflow: auto;
    }
</style>
